<template>
	<view class="banner-box">
	

		<!-- 轮播图 
		indicator-dots	指示点
		autoplay 是否自动切换 
		interval 自动切换时间间隔
		-->
		<!-- @change="swiperChange" -->
		
		<swiper class="banner-swipper" indicator-dots indicator-color="rgba(255, 255, 255, 0.5)"
			indicator-active-color="#FFFFFF" autoplay :interval="4000" :current="current" >
			<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
				<image  @click="tabBarUrl(`/pages/mycon/list`)" :src="item.imageUrl"></image>
				<!-- <image v-else-if="item.type==2" @click="navTo(`/pages/ggb/info`)" :src="item.imageUrl"></image>
				<image v-else-if="item.type==2" @click="tabBarUrl(`/pages/warmcare/info`)" :src="item.imageUrl"></image>
				<image v-else-if="item.type==2" @click="navTo(`/pages/vip/info`)" :src="item.imageUrl"></image>
				<image v-else  :src="item.imageUrl"></image> -->
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {

		props: {
			bannerList: { // 轮播图数组
				type: Array,
				default: () => [{
						id: 1,
						type: 3,
						imageUrl: 'http://ydxcx.dianteng.cc/static/uploads/picture/20221102/717e147e12432235af30e2b8d30ae941.png',
						background: '#A464C4',
						advertUrl: '/pages/course/course-details'
					},
					{
						id: 2,
						type: 2,
						imageUrl: 'http://ydxcx.dianteng.cc/static/uploads/picture/20221102/717e147e12432235af30e2b8d30ae941.png',
						background: '#006C00',
						advertUrl: '/pages/course/course-details'
					},
					{
						id: 2,
						type: 2,
						imageUrl: 'http://ydxcx.dianteng.cc/static/uploads/picture/20221102/717e147e12432235af30e2b8d30ae941.png',
						background: '#0072B7',
						advertUrl: '/pages/course/course-details'
					}
				]
			}
		},

		data() {
			return {
				current: 0, // 当前所在滑块的 index
				bannerBackgroud: '' // 背景色
			}
		},
		methods: {
			
			tabBarUrl(url) {
				uni.switchTab({
					url: url
				})
			},
			// 每次切换滑动时触发
			// swiperChange(e) {console.log(899)

			// 	// console.log('e', e.detail.current)
			// 	this.current = e.detail.current
			// 	// 切换轮播图背景色
			// 	this.bannerBackgroud = this.bannerList[this.current].background
			// 	let uurl = this.$util.routePath()
				
			// 	if (uurl === 'pages/index/index') {
			// 		uni.setNavigationBarColor({
			// 			frontColor: '#ffffff',
			// 			backgroundColor: this.bannerBackgroud,
			// 			animation: {
			// 				duration: 1,
			// 				timingFunc: 'easeIn'
			// 			}
			// 		})
			// 	}
			// 	// console.log('bannerBackgroud', this.bannerBackgroud)
			// }
		},

		watch: {
			// bannerList: {
			// 	handler(newVal) {
			// 		if (newVal && newVal.length > 0) {
			// 			// 获取第1个元素中的背景色，然后设置 
			// 			this.current = 0
			// 			// 设置第1张图背景色
			// 			this.bannerBackgroud =
			// 				this.bannerList[0] && this.bannerList[0].background
			// 		}
			// 	},
			// 	immediate: true // 第1次加载就执行此监听器
			// }
		}
	}
</script>

<style lang="scss">
	.banner-box {
		padding-top: 10rpx;

		.banner-bg {
			background-color: #009926;
			position: absolute;
			top: 0;
			width: 100%;
			height: 300rpx;
			transform: .5s;
		}

		.banner-swipper {

			width: 100%;
			height: 300rpx;
			

			.swiper-item {
				bottom: 0;
				width: 100%;
				height: 100%;
				padding: 0 30rpx;

				image {

					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>
